<!--
 * @Description: 雷达图(面-带底色)
 * @Author: xjc
 * @Date: 2022-06-21 15:29:04
 * @LastEditTime: 2022-06-21 15:30:43
 * @LastEditors: xjc
-->
<template>
  <div id="radar-container" />
</template>

<script setup>
import {onMounted} from 'vue'
// eslint-disable-next-line no-undef
const {Radar} = G2Plot

onMounted(() => {
  fetch('https://gw.alipayobjects.com/os/antfincdn/svFjSfJkYy/radar.json')
  .then(data => data.json())
  .then(data => {
    const radarPlot = new Radar('radar-container', {
      data,
      xField: 'item',
      yField: 'score',
      seriesField: 'user',
      meta: {
        score: {
          alias: '分数',
          min: 0,
          max: 80,
        },
      },
      xAxis: {
        line: null,
        tickLine: null,
        grid: {
          line: {
            style: {lineDash: null},
          }
        }
      },
      yAxis: {
        line: null,
        tickLine: null,
        grid: {
          line: {
            type: 'line',
            style: {lineDash: null},
          },
          alternateColor: 'rgba(0, 0, 0, 0.04)',
        }
      },
      // 开启面积
      area: {},
      // 开启辅助点
      point: {size: 2},
    })
    
    radarPlot.render()
  })
})
</script>
